<template>
  <section>
    <header>
      <div class="tuan">爆爆团</div>
      <div class="da">限时爆款 超级低价</div>
      <div class="renwu">
        <div @click="baobaotuan">正在抢购</div>
        &nbsp;&nbsp;&nbsp;
        <div @click="shangxin">上新预告</div>
      </div>
    </header>
    <ul>
      <li v-for="(item, index) in shuju" :key="index">
        <div class="left"><img :src="item.picture" alt="" /></div>
        <div class="right">
          <div>{{ item.name }}</div>
          <div>买一送一</div>
          <div class="xia">
            <div>{{ item.min_price }}</div>
            <span>{{ item.promotion_info }}</span>
            <div class="xr">
              <button @click="anniu(item)">{{ (item.status == 0) ? '马上抢' : '已抢' }}</button>
              <div>{{ item.month_saled_content }}</div>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </section>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { a } from "@/api";
var shuju = ref([])
var shuju1 = ref([])
var shuju2 = ref([])
var shuju = ref([])
var sts = ref(1)

var baobaotuan = () => {
  if (sts.value == 1) {
    a({ status: 0 }).then((res) => {
      // console.log(res.data.list);
      shuju1.value = res.data.list;
      // console.log(this.shuju);
      shuju.value =shuju1.value
      sts.value = 2
    });
  } else {
    // console.log(this.shuju);
    return shuju.value =shuju1.value
  }
}
var shangxin = () => {
  if (sts.value == 2) {
    a({ status: 1 }).then((res) => {
      shuju2.value = res.data.list.map(item => {
        return { ...item, status: 0 }
      })
      sts.value = 3
    });
  } else {
    return shuju.value =shuju2.value
  }
}
var anniu = (item) => {
  if (item.status == 0) {
    item.status = 1
    // console.log(this.shuju);
  }
}
//组件挂载完成
onMounted(() => {
  //请求店铺列表
  a({ status: 0 }).then((res) => {
    shuju.value = res.data.list;
  });
})

</script>

<style scoped>
body section {
  width: 100%;
  background-color: crimson;
}

/* section header{
  position: ;
} */

section .tuan {
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-size: 25px;
}

section .da {
  width: 100%;
  height: 200px;
  text-align: center;
  line-height: 200px;
  font-size: 40px;
}

section .renwu {
  display: flex;
}

section ul li {
  display: flex;
  margin: 5px;
  padding: 10px;
  width: 94%;
  height: 150px;
  background-color: pink;
}

section ul li .left {
  width: 120px;
  height: 120px;
}

section ul li .left img {
  width: 100%;
}

section ul li .right {
  margin-left: 5px;
  flex: 1;
}

section ul li .right .xia {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

section ul li .right .xia .xr button {
  margin-bottom: 10px;
  width: 70px;
  height: 30px;
}
</style>
